<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title></title>
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="pos-r">
<div id="attr">
<div class="pos-a" style="width:600px;left:0;top:0; bottom:0; height:100%; border-right:2px solid #e5e5e5; overflow:auto;padding-right: 10px;">
	<div class="cl pd-5 bg-1 bk-gray mt-20" style="margin-top: 0px;">
	    <span class="l">
				<a href="javascript:;" onclick="attr_add('增加','attr-add','800','300')" class="btn btn-primary radius"><i class="icon-plus"></i> 添加</a>
				<!--<a href="javascript:;" onclick="attr_edit('增加','attr-edit','800','300')" class="btn radius"><i class="icon-trash"></i> 编辑</a>-->
				<a href="javascript:;" onclick="attr_del()" class="btn btn-danger radius"><i class="icon-trash"></i> 删除</a>
			</span>
	    <!-- <span class="r">共有数据：<strong>88</strong> 条</span> -->
	  </div>
	  <table class="table table-border table-bordered table-hover table-bg table-sort" id="table1">
	    <thead>
	      <tr class="text-c">
	        <th width="25"><input type="checkbox" name="" value=""></th>
	        <th width="100">属性名称</th>
	        <th width="100">属性类型</th>
	        <th width="70">是否权限</th>
			  <th width="25">操作</th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr class="text-c" th:each="attr:${attributesList}" th:onclick="'javascript:showList(\''+${attr.id}+'\',this)'">
			  <td><input type="checkbox" id="c1" th:value="${attr.id}" name="id" th:onclick="'javascript:check(\''+${attr.id}+'\',event,this)'"></td>
			  <td th:text="${attr.name}"></td>
			  <td th:text="${attr.type}"></td>
			  <td th:text="${attr.purview}"></td>
			  <td><a href="javascript:;" th:onclick="'javascript:attr_edit(\''+${attr.id}+'\')'" class="layui-btn layui-btn-xs"><i class="Hui-iconfont Hui-iconfont-edit"></i>编辑</a></td>
		  </tr>
	    </tbody>
	  </table>
</div>
<div style="margin-left:620px;" >
	<!-- <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 产品管理 <span class="c-gray en">&gt;</span> 被审计机构 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav> -->
<div class="cl pd-5 bg-1 bk-gray mt-20" style="margin-top: 0px;">
    <span class="l">
			<a href="javascript:;" onclick="listattr_add('添加列表属性','listattr-add','800','300')" class="btn btn-primary radius"><i class="icon-plus"></i> 添加</a>
			<a href="javascript:;" onclick="listattr_del()" class="btn btn-danger radius"><i class="icon-trash"></i> 删除</a>
		</span>
    <!-- <span class="r">共有数据：<strong>88</strong> 条</span> -->
  </div>
  <table class="table table-border table-bordered table-hover table-bg table-sort" id="table2">
    <thead>
      <tr class="text-c">
        <th width="25"><input type="checkbox" name="" value=""></th>
        <th width="100">代码</th>
        <th width="200">名称</th>
		<th width="25">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-c" v-for="at in attrlist">
        <td><input type="checkbox" name="" :value="at.id"></td>
        <td>{{at.code}}</td>
        <td>{{at.name}}</td>
		<td><a href="javascript:;" @click="listattr_edit(at.id)" class="layui-btn layui-btn-xs"><i class="Hui-iconfont Hui-iconfont-edit"></i>编辑</a></td>
      </tr>
    </tbody>
  </table>
		</div>
	</div>
</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<!-- <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> -->
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="js/vue-2.4.0.js"></script>
<script type="text/javascript" src="js/vue-resource-1.3.4.js"></script>
<script type="text/javascript">

function attr_add(title,url,w,h){
	layer_show(title,url,w,h);
}
function attr_edit(id){
    layer.open({
        type: 2,
        title: "编辑",
        shadeClose: false,
        shade: [0.3],
        maxmin: true, //开启最大化最小化按钮
        area: ['900px', '80%'],
        scrollbar: false, //屏蔽滚动条
        content: "attr-edit?id="+id,
    });
}
// var  ids = [];
// function check(id,e,t){
//     if(e.target.checked){//如果是被选中,则增加到数组
//         ids.push(id);
//     }else{
//         var idx = ids.indexOf(id);
//         ids.splice(idx, 1);//删除
//     }
// }

function attr_del(){
    var t = confirm("确认要删除吗，这样会将右侧数据一并删除")
    if (t){
        var ids = [];
        $("#table1 input[type=checkbox]:not(:first)").each(function(){
            if($(this).is(":checked")){
                ids.push($(this).val())
            }else{
            }
        });
        if (!ids.length<1){
            $.ajax({
                type: "POST",
                url: "/delAttr?ids="+ids,
                success:function (data) {
                    if (data=="200") {
                        layer.msg("删除成功！",{icon:1,time:2000})
                        setTimeout(function () {
                            window.location.reload();
                        },2000)
                    }
                },
                error: function (error) {
                    parent.layer.msg("删除失败！",{icon:1,time:2000})
                }
            });
        }
        return false;
    }
}

function listattr_add(title,url,w,h){
    if (v.id==""){
        layer.msg("👈请选择属性!",{icon:7,time:1500})
        return false;
    }
    layer.open({
        type: 2,
        title: title,
        shadeClose: false,
        shade: [0.3],
        maxmin: true, //开启最大化最小化按钮
        area: ['900px', '50%'],
        scrollbar: false, //屏蔽滚动条
        content: url+"?id="+v.id,
    });
}

function showList(id,t){
	$("#table1 tr:not(first)").css("background-color","#fff")
    if (t.style.backgroundColor != "#FFFFE0") {
        t.style.backgroundColor = "#FFFFE0";
    } else {
        t.style.backgroundColor = "#fff";
    }
    v.showList(id);
    v.id=id;
}

function listattr_del(){
    var t = confirm("确认要删除吗？")
    if (t){
        var ids = [];
        $("#table2 input[type=checkbox]:not(:first)").each(function(){
            if($(this).is(":checked")){
                ids.push($(this).val())
            }else{
            }
        });
        if (!ids.length<1){
            $.ajax({
                type: "POST",
                url: "/delListattr?ids="+ids,
                success:function (data) {
                    if (data=="200") {
                        layer.msg("删除成功！",{icon:1,time:2000})
                        setTimeout(function () {
                            window.location.reload();
                        },2000)
                    }
                },
                error: function (error) {
                    parent.layer.msg("删除失败！",{icon:1,time:2000})
                }
            });
        }
        return false;
    }
}


var v = new Vue({
	el:"#attr",
	data:{
	    // attributes:[],
		id:"",
	    attrlist:[],
	},
	methods:{
        showList(id){
            // console.log(id)
            this.$http.get("/showAttrList", {
                params:{
					id:id
				}
            }).then(function (result) {
                // console.log(result.data)
				this.attrlist=result.data;
            })
		},

        listattr_edit(id){
            layer.open({
                type: 2,
                title: "编辑属性列表",
                shadeClose: false,
                shade: [0.3],
                maxmin: true, //开启最大化最小化按钮
                area: ['900px', '50%'],
                scrollbar: false, //屏蔽滚动条
                content: "/listattr-edit?id="+id
            });
		}
	},
	created(){

	}
});
</script>
</body>
</html>